/*3.3 表格
  name:       hui-table
  example:    
    <table class="hui-table hui-table-bordered hui-table-striped hui-table-condensed">
      <thead>
        <tr>
          <th>…</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>…</td>
        </tr>
      </tbody>
    </table>
  explain:    表格，None无样式，仅仅有列和行|.hui-table|.hui-table-bordered表格外围均有外边框|.hui-table-striped奇数行背景设为浅灰色|.hui-table-condensed竖直方向padding缩减一半，从8px变为4px，所有的 td 和 th 元素都受影响
*/
/*默认table*/
table {
  width: 100%;
  empty-cells: show;
  background-color: transparent;
  border-collapse: collapse;
  border-spacing: 0;
  th {
    text-align: left;
    font-weight: 400
  }
  /*竖直方向padding缩减一半*/
  &.hui-table-condensed th,
  &.hui-table-condensed td {
    padding: 4px 5px
  }
  
  &.hui-table {
    /*带水平线*/
    th {
      font-weight: bold;
    }
    td {
      text-align: left
    }
    th,
    td {
      padding: 8px;
      line-height: 20px;
      word-break: break-all
    }
    tbody {
      tr.success>td {
        background-color: #dff0d8;
      }
      tr.error>td {
        background-color: #f2dede
      }
      tr.warning>td {
        background-color: #fcf8e3
      }
      tr.info>td {
        background-color: #d9edf7
      }
      +tbody {
        border-top: 2px solid #ddd;
      }
    }
    .hui-table {
      background-color: #fff;
    }

    /*带横向分割线*/
    &.hui-table-border {
      border-top: 1px solid #ddd;
      th,
      td {
        border-bottom: 1px solid #ddd
      }
    }

    /*th带背景*/
    &.hui-table-bg thead th {
      background-color: #F5FAFE
    }

    /*带外边框*/
    &.hui-table-bordered {
      border: 1px solid #ddd;
      border-collapse: separate;
      *border-collapse: collapse;
      border-left: 0;
      th,
      td {
        border-left: 1px solid #ddd
      }
      &.hui-table-bordered {
        border-bottom: 0
      }
    }

    /*奇数行背景设为浅灰色*/
    &.hui-table-striped tbody>tr:nth-child(odd)>td,
    &.hui-table-striped tbody>tr:nth-child(odd)>th {
      background-color: #f9f9f9
    }

    /*竖直方向padding缩减一半*/
    &.hui-table-condensed th,
    &.hui-table-condensed td {
      padding: 4px 5px
    }

    /*鼠标悬停样式*/
    &.hui-table-hover tbody tr:hover td,
    &.v-hover tbody tr:hover th {
      background-color: #f5f5f5
    }
    tbody{
      tr.selected td { /*鼠标选择整行样式*/
        
        background-color: #F3F3F3
      }
      tr.active,
      tr.active > td,
      tr.active > th,
      tr .active { /*悬停在行*/
        background-color: #F5F5F5!important
      }
      tr.success,
      tr.success > td,
      tr.success > th,
      tr .success { /*成功或积极*/
        background-color: #DFF0D8!important
      }
      tr.warning,
      tr.warning > td,
      tr.warning > th,
      tr .warning { /*警告或出错*/
        background-color: #FCF8E3!important
      }
      tr.danger,
      tr.danger > td,
      tr.danger > th,
      tr .danger { /*危险*/
        background-color: #F2DEDE!important
      }
    }

    /*表格文字对齐方式，默认是居左对齐*/
    .text-l th,
    .text-l td {
      text-align: left;
    }
    /*整行居中*/
    .text-c th,
    .text-c td {
      text-align: center;
    }

    /*整行居右*/
    .text-r th,
    .text-r td {
      text-align: right;
    }

    /*单独列居左*/
    th.text-l,
    td.text-l {
      text-align: left!important;
    }

    
    /*单独列居中*/
    th.text-c,
    td.text-c {
      text-align: center!important;
    }

    
    /*单独列居右*/
    th.text-r,
    td.text-r {
      text-align: right!important;
    }
    /*圆角*/

    &.radius thead th:first-child {
      border-top-left-radius: 4px;
    }

    &.radius thead th:last-child {
      border-top-right-radius: 4px;
    }

    &.radius tr:last-child td:first-child {
      border-bottom-left-radius: 4px;
    }

    &.radius tr:last-child td:last-child {
      border-bottom-right-radius: 4px;
    }
  }
}

/*datatable*/
table.dataTable {
  border-collapse: separate;
  border-spacing: 0;
  clear: both;
  thead{
    .sorting_asc,
    .sorting_desc,
    .sorting {
      cursor: pointer;
      background-repeat: no-repeat;
      background-position: right center;
        
    }
    .sorting {
      background-image: url(../images/dataTable/sort_both.png)
    }
    .sorting_asc {
      background-image: url(../images/dataTable/sort_asc.png)
    }
    .sorting_desc {
      background-image: url(../images/dataTable/sort_desc.png)
    }
  }
  td.sorting_1 {
    background-color: #f5fafe
  }
}

.dataTables_wrapper {
  .dataTables_length {
    float: left;
    padding-bottom: 20px;
    .select {
      width: 50px
    }
  }
  .dataTables_filter {
    float: right;
    text-align: right;
    .hui-input-text {
      width: auto
    }
  }
  .dataTables_info {
    clear: both;
    float: left;
    padding-top: 10px;
    font-size: 14px;
    color: #666;
  }
  .dataTables_paginate {
    float: right;
    padding-top: 10px;
    text-align: right;
    .paginate_button {
      border: 1px solid #ccc;
      cursor: pointer;
      display: inline-block;
      margin-left: 2px;
      text-align: center;
      text-decoration: none;
      color: #666;
      height: 26px;
      line-height: 26px;
      text-decoration: none;
      margin: 0 0px 6px 6px;
      padding: 0 10px;
      font-size: 14px;
      &:hover,
      &.current,
      &.current:hover {
        background: #5a98de;
        color: #fff;
      }
    }
  }
}

/*让表格支持响应式*/

/*
<div class="hui-table-responsive">
  <table class="hui-table">
    ...
  </table>
</div>
*/
@media (max-width: 767px) {
  .hui-table-responsive {
    width: 100%;
    margin-bottom: 15px;
    overflow-x: scroll;
    overflow-y: hidden;
    border: 1px solid #ddd;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    -webkit-overflow-scrolling: touch;
    >.hui-table {
      margin-bottom: 0;
      > thead > tr > th,
      > tbody > tr > th,
      > tfoot > tr > th,
      > thead > tr > td,
      > tbody > tr > td,
      > tfoot > tr > td {
        white-space: nowrap;
      }
    }
      
    >.hui-table-bordered {
      border: 0;
      >thead>tr>th:first-child,
      >tbody>tr>th:first-child,
      >tfoot>tr>th:first-child,
      >thead>tr>td:first-child,
      >tbody>tr>td:first-child,
      >tfoot>tr>td:first-child {
        border-left: 0
      }

      >thead>tr>th:last-child,
      >tbody>tr>th:last-child,
      >tfoot>tr>th:last-child,
      >thead>tr>td:last-child,
      >tbody>tr>td:last-child,
      >tfoot>tr>td:last-child {
        border-right: 0
      }

      >tbody>tr:last-child>th,
      >tfoot>tr:last-child>th,
      >tbody>tr:last-child>td,
      >tfoot>tr:last-child>td {
        border-bottom: 0
      }
    }
  }
}